<p>Date: {{ date | date: 'yyyy-MM-dd' }}</p>
<lv-calendar
  [(ngModel)]="date"
  [lvCalendarMode]="currentMode"
  [lvCalendarHeaderLeft]="headerLeft"
  [lvCalendarHeaderRight]="headerRight"
  [lvCalendarEvents]="events"
  [lvCalendarEventCell]="eventCell"
  [lvCalendarTitleReadonly]="false"
  (ngModelChange)="dateChange($event)"
  (lvActiveDateChange)="activeDateChange($event)"
></lv-calendar>

<ng-template #eventCell let-event>
  <div
    class="aui-calendar-event-item"
    [ngClass]="{
      'aui-calendar-event-type1': event.type === 1,
      'aui-calendar-event-type2': event.type === 2,
      'aui-calendar-event-type3': event.type === 3,
      'aui-calendar-event-type4': event.type === 4,
      'aui-calendar-event-type5': event.type === 5,
      'aui-calendar-event-type6': event.type === 6
    }"
    #tooltip="lvTooltip"
    [lv-tooltip]="contentTemplate"
    lvTooltipPosition="right"
    lvTooltipClassName="customer"
    lvTooltipTrigger="customize"
    [(lvTooltipVisible)]="event.visible"
    (mouseenter)="event.visible = event.tips"
    (mouseout)="event.visible = false"
  >
    {{ event.title }}

    <ng-template #contentTemplate>
      <div class="aui-event-tips">
        <h2 style="color:#fff">{{ event?.tips?.title }}</h2>
        <div>{{ event?.tips?.time }}</div>
        <div>活动地点 {{ event?.tips?.address }}</div>
        <div>活动产品 {{ event?.tips?.product }}</div>
        <div>研发人员 {{ event?.tips?.developer }}</div>
        <div>一线人员 {{ event?.tips?.maintain }}</div>
      </div>
    </ng-template>
  </div>
</ng-template>

<ng-template #headerLeft>
  <button lv-button lvType="primary" (click)="create($event)">创建</button>
</ng-template>

<ng-template #headerRight>
  <div class="aui-change-mode">
    <lv-radio-group class="aui-mode-switch" [(ngModel)]="currentMode" [lvGroupName]="'changeMode'" (ngModelChange)="modeChange($event)">
      <lv-group>
        <lv-radio [lvViewType]="'button'" [lvValue]="'month'">月</lv-radio>
        <lv-radio [lvViewType]="'button'" [lvValue]="'year'">年</lv-radio>
      </lv-group>
    </lv-radio-group>
  </div>
</ng-template>
